<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="gallery-grid"> <div><img src="http://dummyimage.com/340x320/000/fff" class="img-responsive"></div> <div><img src="http://dummyimage.com/400x200/000/fff" class="img-responsive"></div> <div><img src="http://dummyimage.com/250x350/000/fff" class="img-responsive"></div> <div><img src="http://dummyimage.com/340x400/000/fff" class="img-responsive"></div> <div><img src="http://dummyimage.com/600x400/000/fff" class="img-responsive"></div> <div><img src="http://dummyimage.com/340x400/000/fff" class="img-responsive"></div> <div><img src="http://dummyimage.com/340x250/000/fff" class="img-responsive"></div> <div><img src="http://dummyimage.com/340x200/000/fff" class="img-responsive"></div> <div><img src="http://dummyimage.com/600x400/000/fff" class="img-responsive"></div> </div> </div> </div>

.img-responsive{ width:100%; margin-bottom:30px; } .gallery-grid{ columns: 3; column-gap: 30px; } @media only screen and (max-width: 767px){ .gallery-grid{ columns: 2; } }